<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { getAssetsFile } from '@/utils/utils'
import appStore from '@/stores/index'

const router = useRouter();

const store = appStore()

const props = defineProps({
	// 导航栏 z-index
	zIndex: {
		type: [String, Number],
		default: 1,
	},
	//是否开启顶部安全区适配
	safeAreaInsetTop: {
		type: Boolean,
		default: false,
	},
})

defineEmits(["clickLeft","clickRight"])

// 点击返回
function onClickLeft() {
	// store.setMenuState(!store.showMenu)
}

// 点击右侧
function onClickRight() {
	router.push("/test")
}
</script>

<template>
	<van-nav-bar
		class="search-box"
    :border="false"
    fixed
    placeholder
    safe-area-inset-top
		:z-index="props.zIndex"
    @click-left="onClickLeft"
    @click-right="onClickRight"
  >
    <template #left>
			<van-image class="search-left" v-if="!store.showMenu" :src="getAssetsFile('icon-menu.png')" fit="contain" alt="menu" />
      <van-icon v-else name="cross" color="#EA6101" size="28" />
    </template>

		<template #title>
			<van-image class="search-center" :src="getAssetsFile('icon-logo.png')" fit="contain" @click="$router.push('/')" alt="logo" />
    </template>

    <template #right>
			<van-image class="search-right" :src="getAssetsFile('icon-search.png')" fit="contain" alt="search" />
    </template>
  </van-nav-bar>
</template>

<style lang="less" scoped>
:deep(.van-nav-bar) {
  background: rgba(105,105,105,.8);
}

.search-box {
	.search-left {
		width: 44px;
	}

	.search-center {
		height: 34px;
		vertical-align: middle;
	}

	.search-right {
		width: 44px;
	}

}
</style>
